import React from 'react';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import useLogin from '../components/useLoging';

export default function Login() {
  const { loading, login } = useLogin({ isMobile: false });

  const onFinish = (values) => {
    login(values);
  };

  return (
    <div style={{ width: 360, margin: '100px auto' }}>
      <Form onFinish={onFinish} size="large">
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input
            placeholder="用户名"
            prefix={<UserOutlined />}
            allowClear
          />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input.Password
            placeholder="密码"
            prefix={<LockOutlined />}
            allowClear
          />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            loading={loading}
            block
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}